<template>
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage"
    :page-size="8"
    layout="prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
</template>

<script>
import Bus from "../../../utils/bus";
export default {
  mounted() {
    Bus.$on("resetPage", this.resetPage);
  },
  beforeDestroy() {
    Bus.$off("resetPage", this.resetPage);
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$parent.getData();
    },
    resetPage() {
      this.currentPage = 1;
    },
  },
  data() {
    return {
      currentPage: 1,
    };
  },
  computed: {
    total() {
      return this.$parent.total;
    },
  },
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  .page {
    margin: 0 5px;
    padding: 0;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    line-height: 24px;
    border: 1px solid #b5b5b5;
    border-radius: 5px;
  }
  /deep/.btn-prev {
    .page;
  }
  /deep/.btn-next {
    .page;
  }
  /deep/.el-pager {
    .number {
      .page;
    }
    .el-icon {
      .page;
      &::before {
        line-height: 24px;
      }
    }
  }
  /deep/.el-pagination__jump {
    height: 24px;
    line-height: 24px;
    .el-pagination__editor {
      height: 100%;
      .el-input__inner {
        height: 100%;
        width: 48px;
        border: 1px solid #b5b5b5;
      }
    }
  }
}
</style>
